<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>flati | responsive html5 template | themeforest | josweb</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">

<link href='http://fonts.googleapis.com/css?family=Lato:400,700,300' rel='stylesheet' type='text/css'>
<!--[if IE]>
	<link href="http://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
	<link href="http://fonts.googleapis.com/css?family=Lato:400" rel="stylesheet" type="text/css">
	<link href="http://fonts.googleapis.com/css?family=Lato:700" rel="stylesheet" type="text/css">
	<link href="http://fonts.googleapis.com/css?family=Lato:300" rel="stylesheet" type="text/css">
<![endif]-->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/theme.css" rel="stylesheet">
<link href="css/colour.css" rel="stylesheet" type="text/css"/>
<link href="css/prettyPhoto.css" rel="stylesheet" type="text/css"/>

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<body>
<!--header-->
	<div class="header">
<!--menu-->
    <nav id="main_menu" class="navbar" role="navigation">
      <div class="container">
            <div class="navbar-header">
        <!--toggle-->
			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu">
				<i class="fa fa-bars"></i>
			</button>
		<!--logo-->
			<div class="logo">
				<a href="index.html"><img src="img/logo.png" alt="" class="animated bounceInDown" /></a> 
			</div>
		</div>
           
            <div class="collapse navbar-collapse" id="menu">
                <ul class="nav navbar-nav pull-right">
                   			<li class="dropdown"><a href="javascript:{}">Home</a> 
							<ul class="dropdown-menu">
							<li><a href="index.html">Slider Revolution</a></li>
							<li><a href="index2.html">Nerve Slider</a></li>
							<li><a href="index3.html">NivoSlider</a></li>
							<li><a href="index4.html">Slides</a></li>
							<li><a href="index5.html">Html5 Video</a></li>
						</ul>
							</li>
							<li class="dropdown"><a href="javascript:{}">Pages</a>
						<ul class="dropdown-menu">
								<li><a href="team.html">The Team</a></li>
								<li><a href="about.html">About</a></li>
								<li><a href="services.html">Services</a></li>
								<li><a href="testimonials.html">Testimonials</a></li>
								<li><a href="timeline.html">Timeline</a></li>
								<li><a href="full.html">Full Width</a></li>
								<li><a href="left_sidebar.html">Left Sidebar</a></li>
								<li><a href="right_sidebar.html">Right Sidebar</a></li>
						</ul>
							</li>
							<li class="dropdown active"><a href="javascript:{}">Work</a>
						<ul class="dropdown-menu">
								<li><a href="portfolio_2columns.html">2 Columns</a></li>
								<li><a href="portfolio_3columns.html">3 Columns</a></li>
								<li><a href="portfolio_4columns.html">4 Columns</a></li>
								<li><a href="portfolio_masonry.html">Masonry</a></li>
								<li><a href="gallery.html">Paginated Gallery</a></li>
								<li><a href="video_gallery.html">Video Gallery</a></li>
								<li><a href="single_portfolio.html">Single Slider</a></li>
								<li><a href="single_video.html">Single Video</a></li>
								<li><a href="single_image.html">Single Image</a></li>
								<li><a href="full_slider.html">Full Slider</a></li>
								<li><a href="full_video.html">Full Video</a></li>
						</ul>
							</li>
							<li class="dropdown"><a href="javascript:{}">Style</a>
						<ul class="dropdown-menu">
								<li><a href="scaffolding.html">Scaffolding</a></li>
								<li><a href="shortcodes.html">Shortcodes</a></li>
								<li><a href="icons.html">Icons</a></li>
								<li><a href="script_examples.html">JS Examples</a></li>
								<li><a href="javascript:{}">Sub Menu</a>
							<ul class="dropdown-menu sub-menu">
								<li><a href="#">Sub One</a></li>
								<li><a href="#">Sub Two</a></li>
								<li><a href="#">Sub Three</a></li>
								<li><a href="#">Sub Four</a></li>
							</ul>
						</ul>
							</li>
							<li class="dropdown"><a href="javascript:{}">Extras</a>
						<ul class="dropdown-menu">
								<li><a href="dribbble_stream.html">Dribbble Stream</a></li>
								<li><a href="alt_footer.html">Alt. Footer & Boxes</a></li>
								<li><a href="pricing_table.html">Pricing Table</a></li>
								<li><a href="404.html">404 Page</a></li>
						</ul>
							</li>
							<li class="dropdown"><a href="javascript:{}">Blog</a>
						<ul class="dropdown-menu">
								<li><a href="blog.html">Blog</a></li>
								<li><a href="blog_two.html">Blog II</a></li>
								<li><a href="blog_post.html">Blog Post</a></li>
								<li><a href="blog_post2.html">Blog Post II</a></li>
						</ul>
							</li>
							<li><a href="contact.html">Contact</a></li>
						</ul>
					</div>
				</div>
			</nav>
		</div>
	<!--//header-->
	
	<!--page-->
	<div id="banner">
		<div class="container intro_wrapper">
			<div class="inner_content">
				<h1>Work</h1>
					<h1 class="title">Single Video Project</h1>
						<h1 class="intro">
							We are what we repeatedly do. <span>Excellence</span>, therefore, is not an <span class="hue">act</span>, but a habit. - Aristotle
						</h1>
						<div class="portfolio-links pad15">
							<a href="#"><span class="fa-stack fa-lg"><i class="fa fa-angle-left fa-stack-1x fa-inverse"></i></span></a> 
							<a href="#"><span class="fa-stack fa-lg"><i class="fa fa-angle-right fa-stack-1x fa-inverse"></i></span></a> 
						</div>
					</div>
				</div>
			</div>
			
			<div class="container wrapper">
			<div class="inner_content">
				<div class="row">
				
				<div class="col-md-8 pad25">
				<!-- add your video, remove height and width settings-->
					<div class="vendor">
            			<iframe src="http://player.vimeo.com/video/59653641?title=0&amp;byline=0&amp;portrait=0"></iframe>
          			</div>
				</div>
                   
				 <div class="col-md-4">
					<h2><span>Case Study</span></h2>

						<p class="lead">
							Proin laoreet venenatis augue, eu commodo ligula fermentum at. Vestibulum ante ipsum.
						</p>
						
						<p>
							Suspendisse tempor leo at massa laoreet vel tincidunt leo molestie. Proin tristique accumsan nisl, quis sollicitudin urna ullamcorper 
							posuere cubilia curae vel.
						</p>
						
						<h4><span>Services</span></h4>
						
						<ul class="fa-ul">
							<li><i class="fa-li fa fa-globe colour"></i> Web Design</li>
							<li><i class="fa-li fa fa-pencil colour"></i> Graphic Design</li>
							<li><i class="fa-li fa fa-laptop colour"></i> Web Hosting</li>
						</ul>
						
						 <div class="pad10"></div>
							<a href="#" class="btn btn-info btn-primary btn-custom">view website</a>  
						<div class="pad30"></div>
					</div>
				</div>
					</div>
						</div>
				
	<!--related projects-->	
	
	<div class="strip2">
		<h1>Related Projects</h1>
			<h3 class="center about_strip">
				Ecilisis venenatis risus, suspendisse ac nec et. Nulla sed mauris, congue duis proin nonummy. Elementum phasellus. Mauris sed nulla sed, 
				egestas feugiat a dictum libero  vivamus purus arcu, commodo cursus egestas et.
			</h3>
			
			<div class="container wrapper">
			<div class="inner_content col_full">
			
			<div id="slider_related">
			<div class="slider-item">
				<div class="slider-image">
				<div class="hover_colour">
				<a href="img/large/s1.jpg" data-rel="prettyPhoto[portfolio1]">
				<img src="img/small/s1.jpg" alt=""/></a>
				</div> 
				<a class="related_link" href="#">Item Link</a>
				</div>
			</div>
			
			<div class="slider-item">
				<div class="slider-image">
				<div class="hover_colour">
				<a href="img/large/s2.jpg" data-rel="prettyPhoto[portfolio1]">
				<img src="img/small/s2.jpg" alt=""/></a>
				</div>
				<a class="related_link" href="#">Item Link</a>
				</div>
			</div>
			
			<div class="slider-item">
				<div class="slider-image">
				<div class="hover_colour">
				<a href="img/large/s3.jpg" data-rel="prettyPhoto[portfolio1]">
				<img src="img/small/s3.jpg" alt=""/></a>
				</div>
				<a class="related_link" href="#">Item Link</a>
				</div>
			</div>
			
			<div class="slider-item">
				<div class="slider-image">
				<div class="hover_colour">
				<a href="img/large/s4.jpg" data-rel="prettyPhoto[portfolio1]">
				<img src="img/small/s4.jpg" alt=""/></a>
				</div>
				<a class="related_link" href="#">Item Link</a>
				</div>
			</div>
			
			<div class="slider-item">
				<div class="slider-image">
				<div class="hover_colour">
				<a href="img/large/s5.jpg" data-rel="prettyPhoto[portfolio1]">
				<img src="img/small/s5.jpg" alt=""/></a>
				</div>
				<a class="related_link" href="#">Item Link</a>
				</div>
			</div>
			
			<div class="slider-item">
				<div class="slider-image">
				<div class="hover_colour">
				<a href="img/large/s6.jpg" data-rel="prettyPhoto[portfolio1]">
				<img src="img/small/s6.jpg" alt=""/></a>
				</div>
				<a class="related_link" href="#">Item Link</a>
				</div>
			</div>
			
			<div class="slider-item">
				<div class="slider-image">
				<div class="hover_colour">
				<a href="img/large/s7.jpg" data-rel="prettyPhoto[portfolio1]">
				<img src="img/small/s7.jpg" alt=""/></a>
				</div>
				<a class="related_link" href="#">Item Link</a>
				</div>
			</div>
			
			<div class="slider-item">
				<div class="slider-image">
				<div class="hover_colour">
				<a href="img/large/s8.jpg" data-rel="prettyPhoto[portfolio1]">
				<img src="img/small/s8.jpg" alt=""/></a>
				</div>
				<a class="related_link" href="#">Item Link</a>
				</div>
			</div>
			</div>
				<div id="sl-prev" class="widget-scroll-prev2"><i class="fa fa-chevron-left white"></i></div>
				<div id="sl-next" class="widget-scroll-next2"><i class="fa fa-chevron-right white but_marg"></i></div>
				</div>
			<!--//projects-->
				</div>
			</div>
		<!--//page-->
	
	<!--footer-->
	<div id="footer2">
		<div class="container">
			<div class="row">
				<div class="col-md-12">
					<div class="copyright">
							FLATI
							&copy;
							<script type="text/javascript">
							//<![CDATA[
								var d = new Date()
								document.write(d.getFullYear())
								//]]>
								</script>
							 - All Rights Reserved :
							Template by <a href="http://spiralpixel.com">Spiral Pixel</a>
						</div>
						</div>
					</div>
				</div>
					</div>
				<!-- up to top -->
				<a href="#"><i class="go-top fa fa-angle-double-up"></i></a>
				<!--//end-->
	
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.touchSwipe.min.js"></script>
<script src="js/jquery.mousewheel.min.js"></script>	
<script type="text/javascript" src="js/jquery.prettyPhoto.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
<script src="js/retina.js"></script>
<script type="text/javascript" src="js/jquery.carouFredSel-6.2.1-packed.js"></script>
<!--carousel--> 
<script type="text/javascript">
//<![CDATA[
jQuery(document).ready(function($) {
	$("#slider_related").carouFredSel({ width : "100%", height : "auto",
	responsive : true, auto : false,
	items : { width : 230, visible: { min: 1, max: 5 }
	},
	swipe : { onTouch : true, onMouse : true },
	scroll: { items: 1, },
	prev : { button : "#sl-prev", key : "left"},
	next : { button : "#sl-next", key : "right" }
	});
});
//]]>
</script>
</body>
</html>
